안녕하세요 프론트 15기 유세은입니다 🥰 저번 과제에서 확장성을 고려해서 짰다고는 생각했는데 생각보다 손 볼 부분이 많아서 시간이 많이 걸렸습니다 ㅠㅠ Recoil 적용하고 css 수정하다보니까 늦게 제출하게 되었습니다 아직 수정 중입니다ㅠㅠ

배포링크

메신저

구현화면

어려운 부분

• 채팅,친구 목록 나를 제외한 user 따로 필터링 하기 =>

  const friendList = user.filter(user => user.id !== 0) //나를 제외한 user 따로 필터링 하기

계속 해결하지 못하다가 이 부분에서 위의 방법으로 filter를 이용해서 고쳤는데 혹시 다른 좋은 방법이 있을까요 ,,?

• 최근 채팅 로드하기 =>

const chatLength = chatting[friend.id-1].chat.length;

chat의 배열의 길이를 가져와서 해결했는데 코드가 불필요하게 길어진 부분이 생긴 것 같습니다 ㅠ

-라우팅할때 props 받기 =>
불필요한 코드가 많아지는 것 같아서 개인적으로 아쉽습니다 ㅠ

-Recoil 적용 중인데 적용 안되는 부분들 발생,,ㅠ

-단체 채팅방 만들어보고 싶은데 유저가 2명밖에 토글이 되지 않는 문제 발생,,,(아마 json을 수정해야 될 것 같아용)

고려한 부분

-px 지양 / rem 사용하기..? => 저번 과제 때 효정님이 남겨주신 채림님 코멘트에서 px vs rem을 보고 margin,padding은 rem으로 다시 style 해보았습니다(놓친 부분이 있을수도,,)

-말꼬리 풍선 만들기 말꼬리 풍선 css => 상태 메시지 길이에 따라 말꼬리 길이 조절

-Recoil 사용해보기 recoil이 useState와 근접한 방식으로 사용할 수 있는 것 같아서 Recoil을 사용해서 전역 상태 관리를 해보려고 노력중입니다..(아직 적용중) 확실히 props로 state 를 전달하는 것보다는 편한 것 같아서 개인적으로 더 공부해보고 싶습니당

-홈 페이지를 만들어보고 싶은데 시간 부족,,

-Input 에 useCallBack 함수 사용, React.memo() 사용으로 최적화 해보기

-Basic UI Component 최대한 활용하기

고쳐야 할 부분

-Recoil로 상태 관리하기
-유저가 2명 밖에 토글되지 않는 부분

참고자료

Recoil 기초
말꼬리 풍선 css
안티 패턴
웹 성능 최적화 방법 5분 완성

Key Question

Routing

• 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것
• 리액트에서는 리액트-라우터를 사용(이외에도 여러 라이브러리 존재,,)

SSR(서버 사이드 렌더링)

• 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식
• 바뀌지 않아도 되는 부분이 렌더링 되는 문제 발생
• 하나만 바뀌어도 전부 서버에 다시 요청하는 문제 발생

SPA(싱글 페이지 어플리케이션)

• 하나의 페이지 안에서 필요한 데이터들만 가져오는 것
• 다른 페이지로 이동할 때 새로운 html이 아닌 기존 어플리케이션 유지

느낀 점

개인적으로 이번 과제를 하면서 컴포넌트를 처음에 분리하지 않고 나중에 분리를 하다 보니까 제가 봐도 제 코드가 어지럽고 복잡하더라구요 자잘한 css 수정 관련 커밋이 많아서 부끄럽네요 .. 🤔 css 수정하면서 눈이 너무 아팠습니다 .. 이번 과제의 중점적인 부분이 라우팅+상태 관리+최적화 라고 생각해서 최대한 그 부분을 생각하면서 코드를 짰는데 저번 코드에서 많은 부분을 수정해야 해서 어려웠습니다 ㅠ 아직 Recoil도 기초적인 부분밖에 사용하지 못해서 아쉬움이 남습니다 다른 분들 코드를 보면서 컴포넌트 설계에 대해 많이 배우는 것 같습니다 프론트 너무 어렵따,,, 부족한 부분 코멘트 남겨주세요 >.< .. 감사합니다😍